<!-- 欢迎页面 -->

<template>
  <div class="Welcome">
    <div class="Welcome-bz">
      <a href="/admin"><span>标准</span><span>版</span></a>

      <template v-for="item in list">
        <a v-if="item.bz" :key="item.id" :href="item.bzUrl || `/bz/${item.id}/admin`">
          <span>{{ item.name.slice(0, 2) }}</span>
          <span>{{ item.name.slice(-2) }}</span>
        </a>
        <a v-else :key="item.id"></a>
      </template>
    </div>

    <div class="Welcome-af" :style="afStyle">
      <a href="/af_admin"><span>安防</span><span>版</span></a>

      <template v-for="item in list">
        <a v-if="item.af" :key="item.id" :href="item.afUrl || `/af/${item.id}/admin`">
          <span>{{ item.name.slice(0, 2) }}</span>
          <span>{{ item.name.slice(-2) }}</span>
        </a>
        <a v-else :key="item.id"></a>
      </template>
    </div>

    <div class="Welcome-kj">
      <a href="/kj_admin"><span>科技</span><span>版</span></a>

      <template v-for="item in list">
        <a v-if="item.kj" :key="item.id" :href="item.kjUrl || `/kj/${item.id}/admin`">
          <span>{{ item.name.slice(0, 2) }}</span>
          <span>{{ item.name.slice(-2) }}</span>
        </a>
        <a v-else :key="item.id"></a>
      </template>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import CONST from './CONST'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'Welcome',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 列表
     */
    list: () => CONST,

    /**
     * 安防样式对象
     */
    afStyle() {
      const url = CORE.common('af-bg.png')
      return { backgroundImage: `url(${url})` }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
